<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
        >
            <el-form-item label="姓名" prop="realName">
                <el-input
                    v-model="queryParams.realName"
                    placeholder="请输入姓名"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select
                    v-model="queryParams.sex"
                    placeholder="请选择性别"
                    clearable
                >
                    <el-option
                        v-for="dict in dict.type.sys_user_sex"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
                <el-input
                    v-model="queryParams.phone"
                    placeholder="请输入电话"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >查询</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>
        <TableCard>
            <el-table
                :border="Global.tableShowBorder"
                v-loading="loading"
                :data="inductionList"
                ref="table"
                @select="select"
                @selection-change="handleSelectionChange"
                @row-click="clickRow"
            >
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="工号" align="center" prop="staffNum" />
                <el-table-column label="姓名" align="center" prop="realName" />
                <el-table-column label="性别" align="center" prop="sex">
                    <template slot-scope="scope">
                        <dict-tag
                            :options="dict.type.sys_user_sex"
                            :value="scope.row.sex"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="民族" align="center" prop="nation">
                    <template slot-scope="scope">
                        <dict-tag
                            :options="dict.type.nation_list"
                            :value="scope.row.nation"
                        />
                    </template>
                </el-table-column>
                <el-table-column
                    label="出生日期"
                    align="center"
                    prop="birthdate"
                    width="180"
                >
                    <template slot-scope="scope">
                        <span>{{
                            parseTime(scope.row.birthdate, "{y}-{m}-{d}")
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="婚姻状况"
                    align="center"
                    prop="marryStatus"
                >
                    <template slot-scope="scope">
                        <dict-tag
                            :options="dict.type.marry_status"
                            :value="scope.row.marryStatus"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="电话" align="center" prop="phone" />
            </el-table>

            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
            />
        </TableCard>

        <div
            slot="footer"
            class="dialog-footer"
            style="text-align: right; margin-top: 20px"
        >
            <el-button type="primary" @click="selectStaff">确 认</el-button>
            <el-button @click="close">关 闭</el-button>
        </div>
    </div>
</template>

<script>
import {
    listInduction,
    getInduction,
    delInduction,
    addInduction,
    updateInduction,
} from "@/api/hrm/staff/induction";
import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import BillType from "@/billType";

export default {
    name: "SelectOneStaff",
    dicts: ["sys_normal_disable", "sys_user_sex"],
    components: { Treeselect },
    data() {
        return {
            billType: BillType.billType.STAFF_INDUCTION,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 显示查询条件
            showSearch: true,
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // 用户表格数据
            inductionList: null,
            // 表单参数
            form: {},
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                orderByColumn: "createTime",
                isAsc: "descending",
                realName: null,
                sex: null,
                nation: null,
                birthdate: null,
                political: null,
                joinpartyDate: null,
                marryStatus: null,
                height: null,
                weight: null,
                nativePlace: null,
                idNum: null,
                phone: null,
                mail: null,
                driverslicenseType: null,
                englishLevel: null,
            },
            selectedStaff: {},
        };
    },
    watch: {
        // 根据名称筛选部门树
        deptName(val) {
            this.$refs.tree.filter(val);
        },
    },
    created() {
        this.getList();
        this.getTreeselect();
    },
    methods: {
        /** 查询用户列表 */
        getList() {
            this.loading = true;
            listInduction(
                this.addDateRange(this.queryParams, this.dateRange)
            ).then((response) => {
                this.inductionList = response.rows;
                this.total = response.total;
                this.loading = false;

                //回显
                // if(this.selectedStaff){
                //     console.log("是否需要回显")
                //     console.log(this.selectedStaff)
                //     this.inductionList.forEach((item,index) => {
                //         if(item.userId == this.selectedStaff.userId){
                //             this.$nextTick(() => {
                //                 this.$refs.table.toggleRowSelection(item);
                //             })
                //         }
                //     })
                // }
            });
        },
        /** 查询部门下拉树结构 */
        getTreeselect() {
            treeselect().then((response) => {
                this.deptOptions = response.data;
            });
        },
        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        // 节点单击事件
        handleNodeClick(data) {
            this.queryParams.deptId = data.id;
            this.handleQuery();
        },
        /** 查询按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据改变时候触发
        handleSelectionChange(selection) {
            if (selection && selection.length > 0) {
                // console.log("选中一行");
                // console.log(JSON.stringify(selection));
                // console.log(selection[selection.length - 1].nickName);
                this.selectedStaff = selection[selection.length - 1];
            }
        },
        // 点击前面复选框时候触发
        select(selection, row) {
            // console.log("section:"+JSON.stringify(selection))
            // console.log("row:"+JSON.stringify(row))
            // 清除 所有勾选项
            this.$refs.table.clearSelection();
            // 当表格数据都没有被勾选的时候 就返回
            // 主要用于将当前勾选的表格状态清除
            if (selection.length == 0) return;
            this.$refs.table.toggleRowSelection(row, true);
        },
        // 选择行的时候触发
        clickRow(row) {
            const users = this.selectedStaff;
            this.$refs.table.clearSelection();
            if (users && users.length == 1) {
                users.forEach((item) => {
                    // 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中
                    if (item.id == row.id) {
                        this.$refs.table.toggleRowSelection(row, false);
                    }
                    // 不然就让当前的一行勾选
                    else {
                        this.$refs.table.toggleRowSelection(row, true);
                    }
                });
            } else {
                this.$refs.table.toggleRowSelection(row, true);
            }
        },
        selectStaff() {
            this.$emit("selectedOneStaff", this.selectedStaff);
        },
        close() {
            console.log("关闭");
            this.$emit("closeSelectOneStaff");
        },
    },
};
</script>
<style scoped>
/deep/ .el-table__header-wrapper .el-checkbox {
    display: none;
}
</style>
<style scoped lang="scss">
.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
    box-shadow: none;
}
</style>
